<template>
	<ComPop
		v-model="show"
		width="50%"
		title="标准识别图片管理"
		@save-submit="saveSubmit"
	>
		<div class="flex flex-col gap-y-2">
			<div class="flex gap-x-2">
				<div class="w-[300px] text-[14px]">
					<div
						class="h-[48px] flex justify-between items-center bg-[#2795ff] p-2 rounded-tl-md rounded-tr-md text-white"
					>
						<span>序列号</span>
						<el-tooltip :content="baseInfo.deviceCode" placement="top">
							<p
								class="max-w-[200px] w-full overflow-hidden whitespace-nowrap text-ellipsis"
							>
								{{ baseInfo.deviceCode }}
							</p>
						</el-tooltip>
					</div>
					<div
						class="h-[40px] flex justify-between items-center border border-[#2795ff] p-2"
					>
						<span>设备名</span>
						<el-tooltip :content="baseInfo.deviceName" placement="top">
							<p
								class="max-w-[200px] w-full overflow-hidden whitespace-nowrap text-ellipsis"
							>
								{{ baseInfo.deviceName }}
							</p>
						</el-tooltip>
					</div>
					<div
						class="h-[40px] flex items-center border border-[#2795ff] border-t-0"
					>
						<div
							class="flex-1 flex justify-between h-full border-r border-r-[#2795ff] p-2"
						>
							<span>设备类型</span>
							<span>{{ baseInfo.deviceType }}</span>
						</div>
						<div class="flex-1 flex justify-between h-full p-2">
							<span>设备厂家</span>
							<span>{{ baseInfo.manufacturer }}</span>
						</div>
					</div>
					<div
						class="h-[40px] flex items-center border border-[#2795ff] border-t-0"
					>
						<div
							class="flex-1 flex justify-between h-full border-r border-r-[#2795ff] p-2"
						>
							<span>使用状态</span>
							<span>{{ baseInfo.deviceUseStatus }}</span>
						</div>
						<div class="flex-1 flex justify-between h-full p-2">
							<span>在线状态</span>
							<span>{{ baseInfo.onlineStatus || '离线' }}</span>
						</div>
					</div>
					<div class="flex justify-around items-center gap-x-2 mt-4">
						<div
							class="flex-1 flex justify-center items-center h-[40px] bg-[#f2f7fc] rounded-md text-sm text-[#2795ff] font-bold cursor-pointer"
							:class="{
								'!text-white !bg-[#2795ff]': baseInfo.dayImage,
							}"
							@click.stop="setImages(true)"
						>
							白标照片{{ baseInfo.dayImage ? '（选中）' : '' }}
						</div>
						<div
							class="flex-1 flex justify-center items-center h-[40px] bg-[#f2f7fc] rounded-md text-sm text-[#2795ff] font-bold cursor-pointer"
							:class="{
								'!text-white !bg-[#2795ff]': baseInfo.nightImage,
							}"
							@click.stop="setImages(false)"
						>
							夜标照片{{ baseInfo.nightImage ? '（选中）' : '' }}
						</div>
					</div>
				</div>
				<div class="flex flex-col gap-y-2 flex-1 relative">
					<div
						class="relative h-[225px] rounded-lg overflow-hidden"
						v-if="baseInfo.deviceImages?.length"
					>
						<el-carousel
							:autoplay="false"
							class="h-full"
							@change="handleCarouselChange"
						>
							<el-carousel-item
								v-for="item in baseInfo.deviceImages"
								:key="item"
							>
								<viewer :images="[item?.img_url]">
									<el-image
										style="width: 100%; height: 100%"
										:src="item?.img_url"
										fit="fill"
									/>
								</viewer>
							</el-carousel-item>
						</el-carousel>
						<!-- <div class="absolute bottom-2 left-0 w-full flex justify-center">
              <el-space class="bg-white px-2 rounded-full opacity-70 text-[12px]" :size="2">
                <span>{{ currIndex }}</span>
                <span>/</span>
                <span>{{ baseInfo.deviceImages.length }}</span>
              </el-space>
            </div>-->
					</div>
					<el-empty v-else />
				</div>
			</div>
			<div class="flex justify-between gap-x-3 h-[150px] mt-4">
				<div class="flex-1 flex gap-x-1">
					<span>白标图片：</span>
					<div class="img-box flex-1 max-h-[150px]">
						<upload
							:fileSizew="1"
							v-model:url="baseInfo.dayImage"
							v-if="!baseInfo.dayImage"
						/>
						<el-image
							:src="baseInfo.dayImage"
							width="100%"
							:zoom-rate="1"
							:max-scale="1.4"
							:min-scale="0.2"
							:preview-src-list="[baseInfo.dayImage]"
							v-if="baseInfo.dayImage"
						/>
						<el-icon
							class="del-btn"
							v-if="baseInfo.dayImage"
							@click="handleDelImage(true)"
						>
							<Delete />
						</el-icon>
					</div>
				</div>
				<div class="flex-1 flex gap-x-1">
					<span>夜标图片：</span>
					<div class="img-box flex-1 max-h-[150px]">
						<upload
							:fileSizew="1"
							v-model:url="baseInfo.nightImage"
							v-if="!baseInfo.nightImage"
						/>
						<el-image
							:src="baseInfo.nightImage"
							width="100%"
							:zoom-rate="1"
							:max-scale="1.4"
							:min-scale="0.2"
							:preview-src-list="[baseInfo.nightImage]"
							v-if="baseInfo.nightImage"
						/>
						<el-icon
							class="del-btn"
							v-if="baseInfo.nightImage"
							@click="handleDelImage(false)"
						>
							<Delete />
						</el-icon>
					</div>
				</div>
			</div>
			<BasicTable :data="operaLogList" :option="operaLogCloumn">
				<template v-slot:operateContent="{ row }">
					<viewer :images="[getDayImage(row)]" v-if="getDayImage(row)">
						<el-image
							:src="getDayImage(row)"
							style="width: 94px; height: 56px"
							class="cursor-pointer"
						/>
					</viewer>
					<span v-else>暂无图片</span>
				</template>
				<template v-slot:operateContent2="{ row }">
					<viewer :images="[getNightImage(row)]" v-if="getNightImage(row)">
						<el-image
							:src="getNightImage(row)"
							style="width: 94px; height: 56px"
							class="cursor-pointer"
						/>
					</viewer>
					<span v-else>暂无图片</span>
				</template>
			</BasicTable>
		</div>
	</ComPop>
</template>
<script setup lang="ts" name="InOutLeft">
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import {
	queryDeviceById,
	projectImageMark,
	operateLog,
	projectSubmitImageMark,
} from '/@/api/equipment/manage';
import upload from './upload.vue';
const emits = defineEmits(['finish']);
defineExpose({ open });
const show = ref(false);

// 当前设备信息
const baseInfo = ref({
	dayImage: '',
	nightImage: '',
	deviceImages: [],
});

// 当前设备修改记录
const operaLogList = ref([]);
// 当前设备修改记录属性
const operaLogCloumn = {
	index: true,
	menu: false,
	hiddenPage: true,
	height: 300,
	column: [
		{
			prop: 'operateContent',
			label: '白标照片',
		},
		{
			prop: 'operateContent2',
			label: '晚标照片',
		},
		{
			prop: 'createBy',
			label: '操作人',
		},
		{
			prop: 'createTime',
			label: '操作时间',
		},
	],
} as BasicTableNameSpace.OptionType;
// 打开当前弹窗
async function open(id: string) {
	await getBaseInfo(id);
	await getImageMark(id);
	await getOperateLog(id);
	show.value = true;
}
// 获取基础信息
function getBaseInfo(deviceId: string) {
	queryDeviceById({ deviceId })
		.then((res) => {
			if (res.code === 0) {
				baseInfo.value = res.data;
				if (!baseInfo.value.dayImage) {
					baseInfo.value.dayImage = '';
				}
				if (!baseInfo.value.nightImage) {
					baseInfo.value.nightImage = '';
				}
			}
		})
		.catch((err) => {
			console.log(err);
		});
}
// 获取图片列表
function getImageMark(deviceId: string) {
	// 获取前一天的日期
	let yesterday = dayjs().subtract(1, 'day');
	// 设置时间为前一天下午1点
	let startTime = yesterday
		.set('hour', 13)
		.set('minute', 0)
		.set('second', 0)
		.set('millisecond', 0)
		.format('YYYY-MM-DD HH:mm:ss');

	// 设置时间为前一天下午5点
	let endTime = yesterday
		.set('hour', 17)
		.set('minute', 0)
		.set('second', 0)
		.set('millisecond', 0)
		.format('YYYY-MM-DD HH:mm:ss');
	projectImageMark({ deviceId, startTime, endTime })
		.then((res) => {
			if (res.code === 0) {
				baseInfo.value.deviceImages = res.data || [];
			}
		})
		.catch((err) => {
			console.log(err);
		});
}
// 删除图片
function handleDelImage(isDayImage = true) {
	if (isDayImage) {
		baseInfo.value.dayImage = '';
	} else {
		baseInfo.value.nightImage = '';
	}
}
// 获取白标图片
function getDayImage(row: any) {
	let imgUrl = row.operateContent.split(',')[0].split('@@@')[1];
	return imgUrl || '';
}
// 获取黑标图片
function getNightImage(row: any) {
	let imgUrl = row.operateContent.split(',')[1].split('@@@')[1];
	return imgUrl || '';
}
// 获取操作日志
function getOperateLog(id: string) {
	operateLog({
		current: 1,
		size: 1000,
		bizNo: id,
		operateModelType: 'DEVICE_IMAGE_MARK',
	}).then((res) => {
		if (res.code === 0) {
			operaLogList.value = res.data.records;
		}
	});
}
//轮播图改变
const nowCarouselIndex = ref(0);
function handleCarouselChange(nowIndex: number) {
	nowCarouselIndex.value = nowIndex;
}
// 开始保存当前设备信息
function saveSubmit() {
	projectSubmitImageMark({
		deviceId: baseInfo.value?.deviceId,
		dayImage: baseInfo.value?.dayImage,
		nightImage: baseInfo.value?.nightImage,
	}).then((res) => {
		if (res.code === 0) {
			ElMessage.success('设置标准识别图片成功');
			emits('finish');
			show.value = false;
		}
	});
}

// 设置图片
function setImages(isDayImage = true) {
	if (isDayImage) {
		if (baseInfo.value?.deviceImages) {
			if (baseInfo.value?.deviceImages[nowCarouselIndex.value]) {
				baseInfo.value.dayImage =
					baseInfo.value?.deviceImages[nowCarouselIndex.value].img_url;
			}
		}
	} else {
		ElMessage.error('暂时不能设置夜标照片');
		/*baseInfo.value.nightImage.value = baseInfo.value?.deviceImages
          ? baseInfo.value.deviceImages[nowCarouselIndex.value]
          : ""*/
	}
}
</script>
<style lang="scss" scoped>
.el-image {
	width: 100%;
	height: 100%;
	border-radius: 4px;
}
.img-box {
	position: relative;
	.del-btn {
		position: absolute;
		right: 5px;
		top: 5px;
		padding: 3px;
		font-size: 20px;
		color: #f00;
		cursor: pointer;
		z-index: 9999;
	}
}
</style>
